<script setup lang="ts">
import pageHeader from "./components/pageHeader.vue";
import cardHeader from "./components/card_header.vue";
import showDialog from "./components/show_dialog.vue";
import {ref, onBeforeMount, reactive} from "vue";
import baseService from "@/service/baseService";

const showDialogRef = ref();
let arr = ["noticeAnnouncement", "chengliRongguang", "governmentProcess"];

const dataArr = reactive({}) as any;

const nweCashList = ref([]) as any;

const show = (id: any) => {
  // loading.value = true;
  baseService.get(`/bus/busnotice/${id}`).then((res) => {
    // loading.value = false;
    showDialogRef.value.acceptParams({text: res.data.textContent});
  });
};

const showDia = (texts: string) => {
  showDialogRef.value.acceptParams({text: texts});
}

const getDataList = () => {
  for (let i = 0; i < arr.length; i++) {
    baseService
      .get("/bus/busnotice/page", {
        page: 1,
        limit: 30,
        type: arr[i],
        textType: i === 1 ? 3 : "",
        isPublish: 1
      })
      .then((res) => {
        dataArr[arr[i]] = res.data.list;
        if (i === 1) {
          let chunk = 4;
          for (let ii = 0, j = res.data.list.length; ii < j; ii += chunk) {
            nweCashList.value.push(res.data.list.slice(ii, ii + chunk))
          }
        }
      });
  }
  for (let i = 0; i < party_arr.length; i++) {
    baseService.get("/bus/busnotice/page", {
      page: 1,
      limit: 10,
      type: party_arr[i].key,
      textType: 3,
      isPublish: 1
    }).then((res) => {
      dataArr[party_arr[i].key] = res.data.list;
    });
  }
};

const party_arr = [
  {
    key: "openPartyAffairs",
    name: "党务公开栏"
  },
  {
    key: "openGovernmentAffairs",
    name: "政务公开栏"
  },
  {
    key: "openFinance",
    name: "财务公开栏"
  },
  {
    key: "openWork",
    name: "事务公开栏"
  },
  {
    key: "openService",
    name: "服务公开栏"
  }
];

onBeforeMount(() => {
  getDataList();
});
</script>

<template>
  <!--知塍晓政-->
  <div class="mod-out-home">
    <pageHeader></pageHeader>
    <div class="max_screen_body party_politics_box">
      <div class="party_politics_top">
        <card-header :title="'公开栏'" :path="'screen/card_header4.png'"></card-header>
        <div class="party_politics_top_body">
          <div class="screen_card_imgBox_item" v-for="(item, index) in party_arr" :key="index + '_key4'">
            <div class="imgBox_item_title">
              <img src="@/assets/images/screen/img_title2.png" alt=""/>
              <div class="imgBox_item_tit">{{ item.name }}</div>
            </div>
            <div class="imgBox_item_imgBox_out">
              <div class="imgBox_item_imgBox_inner">
                <el-carousel indicator-position="none" arrow="never" :interval="5000+((index+1)*1000)">
                  <el-carousel-item v-for="(ite,ind) in dataArr[item.key]" :key="ite.id">
                    <el-image style="width: 100%; height: 100%;" :src="'https://' + ite.image"
                              :preview-src-list="[...dataArr[item.key].map((it:any)=>'https://' + it.image)]"
                              preview-teleported
                              :initial-index="ind"
                              fit="cover"></el-image>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="party_politics_bottom">
        <div class="party_politics_bottom_left">
          <card-header :title="'通知公告'" :path="'screen/card_header3.png'"></card-header>
          <div class="party_politics_card_body">
            <div class="screen_news_item" v-for="item in dataArr['noticeAnnouncement']" :key="item.id"
                 @click="show(item.id)">
              <img src="@/assets/images/screen/news_icon.png" alt=""/>
              <div>{{ item.title }}</div>
            </div>
          </div>
        </div>
        <div class="party_politics_bottom_center">
          <card-header :title="'政务流程'" :path="'screen/card_header3.png'"></card-header>
          <div class="party_politics_card_body">
            <div class="richText" v-if="dataArr['governmentProcess']">
              <div class="richTextTitle">
                {{ dataArr['governmentProcess'][0].title }}
              </div>
              <div class="richTextDesc" @click="showDia(dataArr['governmentProcess'][0].textContent)" v-scroll>
                <div v-html="dataArr['governmentProcess'][0].textContent"></div>
              </div>
            </div>
            <!--            <el-carousel indicator-position="none" arrow="never" :interval="6000" v-if="dataArr['governmentProcess']">-->
            <!--              <el-carousel-item v-for="item in dataArr['governmentProcess']" :key="item.id">-->
            <!--                <div class="imageBox">-->
            <!--                  <el-image class="home_box_item_carousel_img" style="width: 100%; height: 100%" fit="cover"-->
            <!--                            :src="'https://' + item.image"/>-->
            <!--                </div>-->
            <!--                <div class="img_desc">{{ item.title }}</div>-->
            <!--              </el-carousel-item>-->
            <!--            </el-carousel>-->
          </div>
        </div>
        <div class="party_politics_bottom_right">
          <card-header :title="'塍里荣光'" :path="'screen/card_header3.png'"></card-header>
          <div class="party_politics_card_body" v-if="dataArr['chengliRongguang']">
            <el-carousel indicator-position="none" arrow="never" :interval="6000" v-if="nweCashList.length>0">
              <el-carousel-item v-for="(item,index) in nweCashList" class="party_politics_card_body_2"
                                :key="index+'_key2'">
                <div class="party_politics_bottom_right_item" v-for="ite in item" :key="item.id">
                  <div class="img">
                    <el-image class="home_box_item_carousel_img" style="width: 100%; height: 100%" fit="cover"
                              :src="'https://' + ite.image" :preview-src-list="['https://' + ite.image]"
                              preview-teleported></el-image>
                  </div>
                  <div class="desc">
                    {{ ite.title }}
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <show-dialog ref="showDialogRef"></show-dialog>
  </div>
</template>

<style scoped lang="less">
.party_politics_box {
  display: flex;
  flex-direction: column;

  & > div {
    width: 100%;
  }

  .party_politics_top_body {
    width: 100%;
    height: 40.3vh;
    background: #112a38;
    padding: 1.5vh 2.1vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5vh;

    .screen_card_imgBox_item {
      width: 15.6vw;
      margin-right: 0.5vw;

      .imgBox_item_title {
        position: relative;
        text-align: center;
        margin-bottom: 0;

        img {
          width: 15.2vw;
          height: 4.8vh;
        }

        .imgBox_item_tit {
          position: absolute;
          left: 50%;
          width: 100%;
          transform: translateX(-50%);
          color: #ffffff;
          font-size: 1vw;
          top: 0.6vh;
        }
      }

      .imgBox_item_imgBox_out {
        height: 33vh;
        width: 100%;
        border: 0.1vw solid #ebd091;
        padding: 0.3vh 0.2vw;

        .imgBox_item_imgBox_inner {
          border: 0.1vw solid #1b99df;
          width: 100%;
          height: 100%;
        }
      }
    }

    .screen_card_imgBox_item:last-child {
      margin-right: 0;
    }
  }

  .party_politics_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;

    & > div {
      width: 31.9vw;

      .party_politics_card_body {
        background: #112a38;
        height: 40.3vh;
        overflow: auto;
        padding: 1.3vh 1.1vw;

        .screen_news_item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1.9vh;

          img {
            width: 0.8vw;
            height: 1.8vh;
            margin-right: 0.8vw;
          }

          div {
            flex: 1;
            width: 0;
            font-size: 0.8vw;
            color: #ffffff;
            letter-spacing: 0.1vw;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
          }
        }

        .screen_news_item:last-child {
          margin-bottom: 0;
        }

        text-align: center;

        .el-carousel {
          height: 100%;

          :deep(.el-carousel__container) {
            height: 100%;
          }
        }

        .imageBox {
          border: 0.1vw solid #1aa6f2;
          width: 30vw;
          height: 30.5vh;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .img_desc {
          font-weight: 500;
          color: #ffffff;
          font-size: 1vw;
          margin-top: 3vh;
        }
      }
    }

    .party_politics_bottom_right {
      .party_politics_card_body_2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .party_politics_bottom_right_item {
          width: 14.5vw;
          height: 18vh;

          .img {
            width: 100%;
            height: 80%;
            object-fit: cover;
          }

          .desc {
            font-size: 0.8vw;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 20%;
          }
        }
      }
    }
  }

  .el-carousel {
    height: 100%;
    width: 100%;

    :deep(.el-carousel__container) {
      height: 100%;
    }
  }
}

.party_politics_bottom_center {
  .richText {
    display: flex;
    flex-direction: column;
    height: 100%;

    .richTextTitle {
      font-size: 1vw;
      color: #ffffff;
      height: 1.6vh;
      line-height: 1.6vh;
      margin-bottom: 1vh;
    }

    .richTextDesc {
      height: calc(100% - 2.6vh);
      overflow: auto;
      //background: #fdfdfd;
      :deep(p) {
        span {
          font-size: 0.8vw !important;
          line-height: 1.6 !important;
        }

        line-height: 1.6 !important;
        font-size: 0.8vw !important;
      }
    }
  }
}
</style>
